import React, { Component } from 'react'
import { Link } from 'react-router'
import { TopNavHeader, MyInput } from '../common'
import { IconDown } from '../icon'

export default class RegisterPage extends Component {
  constructor(props) {
    super(props)
    const { query } = props.location
    this.state = {
      agreement: query.echo === 'approve' ? true : false,
    }
  }
  render() {
    const { agreement } = this.state
    return (
      <div className={`rt-register-container`}>
        <TopNavHeader title="注册" />

        <div className={`rt-account-info-box`}>
          <div className={`rt-user-info`}>
            <div className={`cm-avatar-circle`}></div>
            <span>微信名：vp2016</span>
          </div>
          <div className={`rt-unbind-btn`}>解绑</div>
        </div>

        <MyInput
          classArr={['cm-margin-top']}
          placeholder="选择会员单位"
          addonAfter={<IconDown onClick={() => console.log('todo on click')} />}
        />

        <MyInput
          classArr={['cm-margin-top']}
          placeholder="请输入手机号码"
          addonAfter={<i className={`iconfont icon-question`} />}
        />

        <div className={`rt-captcha-box`}>
          <MyInput
            classArr={['cm-margin-top']}
            placeholder="请输入收到的验证码"
            customInputClassArr={['cm-input-width']}
          />
          <div className={`cm-absolute-btn-box`}>获取验证码</div>
        </div>

        <MyInput
          classArr={['cm-margin-top']}
          placeholder="请输入密码"
          addonAfter={<i className={`iconfont icon-question`} />}
        />

        <MyInput
          classArr={['cm-margin-top']}
          placeholder="请输入推荐人手机号码（可选）"
        />

        <div className={`rt-agreement-protocol-box`}>
          <div className={`rt-circle-box`}>
            <div
              className={`cm-tick-box ${agreement ? '' : 'cm-tick-box-hide'}`}
              onClick={() => {
                this.setState({agreement: !agreement})
              }}
            />
          </div>
          <span className={`rt-normal-text`}>我已阅读</span>
          <Link to="/blue-ui/agreement">
            <span className={`rt-protocol-link-text`}>
              《第三方托管协议》及《用户告知书》
            </span>
          </Link>
        </div>

        <div className={`cm-operate-btn cm-margin-top`}>注  册</div>
      </div>
    )
  }
}